<template>
  <div>
    姓名：<input type="text" v-model="user.name" /><br>
    年龄：<input type="text" v-model="user.age" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        name: "",
        age: "",
      },
    };
  },
  //侦听器是个对象(默认情况无法监听引用类型，必须在深度监听下)
  //如果需要页面刚加载就执行,就需要设置立即执行
  //语法：侦听器是个函数
  // 函数名需要和被侦听的数据同名
  watch: {
    user: {
      immediate: true,
      deep: true,
      handler(newVal, oldVal) {
        //监听引用类型，oldVal失效不影响开发
        console.log(newVal, oldVal);
      },
    },
  },
};
</script>

<style lang="scss" scoped>
</style>